<template>
  <div class="mobile-container">
    <div class="app-content">
      <!-- 顶部栏 -->
      <div class="header">
        <div class="header-top">
          <div class="back-icon" @click="handleBack">
            <Icon icon="mdi:arrow-left"/>
          </div>
          <div class="page-title">通知详情</div>
          <div class="placeholder"></div>
        </div>
      </div>

      <!-- 通知详情内容 -->
      <div class="notification-detail" v-if="notification">
        <div class="detail-header">
          <h1 class="detail-title">{{ notification.title }}</h1>
          <div class="detail-time">{{ notification.time }}</div>
        </div>

        <div class="detail-content" v-html="notification.content"></div>
      </div>

      <!-- 加载状态 -->
      <div class="loading-state" v-if="loading">
        <div class="loading-spinner"></div>
        <span class="loading-text">加载中...</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from '@iconify/vue2'

export default {
  name: 'NotificationDetailPage',
  components: {
    Icon
  },
  data() {
    return {
      loading: false,
      notification: null
    }
  },
  mounted() {
    this.loadNotificationDetail()
  },
  methods: {
    handleBack() {
      this.$router.go(-1)
    },

    // 模拟请求通知详情数据
    async loadNotificationDetail() {
      this.loading = true

      // 模拟网络请求延迟
      await new Promise(resolve => setTimeout(resolve, 800))

      const notificationId = this.$route.query.id

      const mockNotifications = {
        1: {
          id: 1,
          time: '2025-10-27 08:09:25',
          title: '关于警惕仿冒凤凰潮APP的公告',
          content: `
          <p>尊敬的凤凰潮会员：</p>

          <p>
            近期，市场出现大量仿冒凤凰潮的APP，其logo、名称与正版高度相似，极具迷惑性，严重威胁大家的信息与财产安全。
          </p>

          <p>为避免您上当受骗，特此提示：</p>

          <div>
            <div>
              <span>1.</span>
              <span>认准官方标识：正版仅通过官方发布的正规链接提供下载，且仿冒产品的UI设计、页面细节与正版存在明显差异，下载前务必仔细甄别。</span>
            </div>
            <div>
              <span>2.</span>
              <span>警惕诈骗陷阱：仿冒APP可能窃取信息，还会以账户冻结、高额返利等名义索要钱款，切勿转账或泄露银行卡、验证码等信息。</span>
            </div>
            <div>
              <span>3.</span>
              <span>官方核实为准：对APP真伪存疑或发现仿冒线索，立即通过官方客服热线、微信公众号咨询，勿信仿冒APP内的客服。</span>
            </div>
          </div>

          <p>
            我司已向监管部门及公安机关报备，将严厉追究相关方责任。请各位会员提高警惕，仔细辨别！
          </p>

          <div>
            <p>凤凰潮运营团队</p>
            <p>[公告发布2025年10月27日]</p>
          </div>
        `
        },
        2: {
          id: 2,
          time: '2025-10-26 08:09:25',
          title: '版本更新',
          content: `
          <p>尊敬的凤凰潮会员：</p>

          <p>
            v3.2.10版本已更新。
          </p>

          <p>更新内容：</p>

          <div>
            <div>
              <span>1.</span>
              <span>页面样式优化。</span>
            </div>
            <div>
              <span>2.</span>
              <span>支持微信、支付宝、银行卡的账户添加。</span>
            </div>
          </div>

          <div>
            <p>凤凰潮运营团队</p>
            <p>[公告发布2025年10月26日]</p>
          </div>
        `
        }
      }

      // 模拟数据
      this.notification = mockNotifications[notificationId] === undefined ? mockNotifications[1] : mockNotifications[notificationId]
      this.loading = false
    }
  }
}
</script>

<style scoped>
.mobile-container {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}

.app-content {
  width: 375px;
  min-height: 667px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 顶部栏样式 */
.header {
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-icon {
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.placeholder {
  width: 36px;
}

/* 通知详情样式 */
.notification-detail {
  flex: 1;
  padding: 0;
  overflow-y: auto;
}

.detail-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  background: white;
}

.detail-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
}

.detail-time {
  font-size: 14px;
  color: #999;
}

.detail-content {
  padding: 20px;
  background: white;
}

/* 加载状态样式 */
.loading-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #999;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: 14px;
  color: #999;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 375px) {
  .mobile-container {
    padding: 0;
  }

  .app-content {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
  }

  .detail-header {
    padding: 16px;
  }

  .detail-content {
    padding: 16px;
  }
}
</style>
